---
title: Insertar en listas
description: Una guía de como usar Fluid DnD para insertar elemntos en una lista.
---

import ListWithInsert from "@/components/svelte/ListWithInsert.svelte";
import { Code } from "@astrojs/starlight/components";

### Ejemplo de lista de números

Para mostrar como usar **Fluid DnD** para insertar elementos en un lista.
Primero, vamos a crear una lista y extraer la función `insertAt` de `useDragAndDrop`:

export const listOfNumbers = `<script lang="ts">
import { useDragAndDrop } from "fluid-dnd/vue";

const list = $state([]);
const [ parent, insertAt ] = useDragAndDrop(list);

</script>`;

export const highlightsListOfNumbers = ["insertAt"];


<Code code={listOfNumbers} lang="svelte" mark={highlightsListOfNumbers} />

### Creando la vista

Después, crearemos la lista con un botón para insertar nuevos elementos llamado `insertAt` :

export const highlightsDroppable = ['<button','button>',"insertAt"];

export const listOfNumbersDroppable = `
<ul use:parent class="number-list">
  {#each list as element, index (element) }
    <li class="number" data-index={index}>
      { element }
    </li>
  {/each}
</ul>
<button class="insert-button" onclick={insertAt(list.length, list.length)}>+</button>
`;

<Code code={listOfNumbersDroppable} lang="svelte" mark={highlightsDroppable} />

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <ListWithInsert client:load />
</div>

## Añadir la clase de inserting

Tu puedes añadir la clase css que se fija cuando un elemento es insertado con el parámetro `insertingFromClass`:

export const listOfNumbersWithRemovingClass = `<script lang="ts">
// ...
const [ parent, removeAt ] = useDragAndDrop(list,{
  insertingFromClass: "inserting"
});

</script>`;
export const highlightsRemovingClass = ["insertingFromClass",'inserting'];

<Code code={listOfNumbersWithRemovingClass} lang="vue" mark={highlightsRemovingClass}/>

### Cambiando los estilos

Después, añadiremos los estilos `inserting` y transiciones cuando la clase es fijada:

export const highlightsStylesRemovingClass = ["inserting","transition"];

export const stylesRemovingClass = `
<style scoped>
.number{
  /*
      ...
  */
  opacity: 1;
  transition: opacity 200ms ease;
}
.number.inserting{
  opacity: 0;
}
</style>
`;

<Code code={stylesRemovingClass} lang="vue" mark={highlightsStylesRemovingClass} />

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <ListWithInsert insertingFromClass="inserting" client:load  />
</div>

## Añadiendo el tiempo de demora antes de insertar

Puedes añadir la cantidad de tiempo en milisegundos antes de insertar un elemento (el tiempo por defecto es de 200 milisegundos):

export const listOfNumbersDelay = `<script lang="ts">
// ...
const [ parent, removeAt ] = useDragAndDrop(list,{
  insertingFromClass: "inserting",
  delayBeforeInsert: 800
});});

</script>`;
export const highlightsDelay = ["delayBeforeInsert"];

<Code code={listOfNumbersDelay} lang="vue" mark={highlightsDelay}/>

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <ListWithInsert insertingFromClass="inserting" delayBeforeInsert={800} client:load  />
</div>